<template>
  <div id="map"></div>
</template>

<script setup>
import "ol/ol.css";
import { Map, View } from "ol";
import { OSM } from "ol/source";
import TileLayer from "ol/layer/Tile";
import VectorTileLayer from "ol/layer/VectorTile";
import { apply, applyStyle } from "ol-mapbox-style";
import { onMounted } from "vue";

let map;
function initMap() {
  const layer = new VectorTileLayer({ declutter: true });
  applyStyle(layer, "mapbox://styles/752841728/cm2u31ghw001c01qwbjhd78v6", {
    accessToken:
      "pk.eyJ1IjoiNzUyODQxNzI4IiwiYSI6ImNsbGdiNnJoNTB6ZjIzcW8xMjVudjJtOGUifQ.u6q8oswvLpgvjdp3nW76jg",
  });

  map = new Map({
    target: "map",
    layers: [layer],
    view: new View({
      center: [113.49, 22.74],
      zoom: 2,
    }),
  });
}

onMounted(() => {
  initMap();
});
</script>

<style scoped>
#map {
  width: 500px;
  height: 500px;
}
</style>
